<template>
<el-form :model="user" :rules="rules" ref="userForm" class="Phone">
    <el-form-item prop="phonecode">
        <el-input type="text" v-model="user.phonecode" maxlength="11" show-word-limit autocomplete="off" placeholder="请输入手机号码" prefix-icon="el-icon-phone"></el-input>
    </el-form-item>
    <el-form-item prop="password">
        <el-row :gutter="10">
            <el-col :span="16">
                <el-input width="60%" v-model="user.password" placeholder="请输入验证码" prefix-icon="el-icon-goods" autocomplete="off" clearable>
                </el-input>
            </el-col>
            <el-col :span="8">
                <el-button type="success" @click="openCode('userForm')">获取验证码</el-button>
            </el-col>
        </el-row>
    </el-form-item>
    <el-button type="primary" class="btn-block" @click="submitForm('userForm')">手机号登录
    </el-button>
</el-form>
</template>

<script>
import {
    checkPhone,
    checkEmptyCheckCode
} from "@/library/regexp";
export default {
    name: "Phone",
    data() {
        return {
            user: {
                phonecode: "",
                password: "",
            },
            checkcode:{},
            rules: {
                phonecode: [{
                    validator: checkPhone("请输入正确的手机号码"),
                    required: true,
                    trigger: "blur",
                }, ],
                password: [{
                    validator: checkEmptyCheckCode("请输入验证码"),
                    required: true,
                    trigger: "blur",
                }, ]
            },
            phone: /^1[3456789]\d{9}$/,
        };
    },
    methods: {
        openCode() {
            if (this.phone.test(this.user.phonecode)) {
                this.$common.sendAuthCode(this.user.phonecode, 2).then((res) => {
                    if (res.code === 500) {
                        this.$message({
                            type: 'warning',
                            message: res.msg
                        });
                        return false
                    } else if (res.code === 0 && res.msg === 'success') {
                        console.log(res)
                        this.checkcode = res

                        this.$message({
                            type: 'info',
                            message: res.validateNum,
                            duration: 3000
                        });
                    }

                })
            } else {
                this.$message.error("请输入正确的手机号码");
            }

        },
        submitForm(formName) {
            localStorage.removeItem('userInfo');
            localStorage.removeItem('ShowMenu/setSideMenu');
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let params = {
                        username: this.user.phonecode,
                        grant_type: 'sms_code',
                        scope: 'all',
                        smscode: this.user.password,
                        hash: this.checkcode.hash,
                        tamp: this.checkcode.tamp
                    }

                    this.$common.oauthLogin(params)
                        .then((res) => {
                            console.log(res)
                            if (res.access_token) {
                                 this.$store.commit('ShowMenu/setShowMenu',this.$router.options.routes[0].children)
                                this.$message({
                                    type: "success",
                                    message: "登录成功",
                                    duration: 300,
                                });
                                setTimeout(() => {
                                    this.$router.push({
                                        name: 'Map',
                                    });
                                }, 0);
                            }
                        })
                        .catch((err) => {
                            console.error(err);
                            this.$message({
                                type: "error",
                                message: err.response.data.error_description,
                                duration: 3000,
                            });
                        });

                } else {
                    // this.$message.error("请输入正确的手机号码");
                    return false;
                }
            });
        },
    },
};
</script>

<style lang="scss"></style>
